<script setup lang="ts">
import type { CronItem } from '~/composables/cron'
import { CronBusKeyEnum, useCornFormat } from '~/composables/cron'
import { dayOptions } from '~/utils/constant'

const data = reactive<CronItem>({
  type: '*',
  intervalStart: 0,
  interval: 5,
  rangeStart: 1,
  rangeEnd: 31,
  nearestWeekday: 1,
  beforeEndMonth: 1,
  specific: [1], // 指定
})
const formatStr = useCornFormat(data)
defineExpose({
  formatStr,
})

const { emit } = useEventBus(CronBusKeyEnum.DAY)
const { on } = useEventBus(CronBusKeyEnum.WEEK)
on((type) => {
  console.log('on week change:', type)
  if (type !== '?')data.type = '?'
})
const typeChange = (type: string) => {
  emit(data.type)
}
</script>

<template>
  <a-radio-group v-model:value="data.type" @change="typeChange">
    <a-radio class="item" value="*">
      每一日
    </a-radio>
    <a-radio class="item" value="?">
      不指定
    </a-radio>
    <!-- */* -->
    <a-radio class="item" value="interval">
      <span class="flex items-center">
        从<a-input-number v-model:value="data.intervalStart" class="mx-2" :min="0" :max="31" />日开始,
        每隔<a-input-number v-model:value="data.interval" class="mx-2" :min="1" :max="31" />日
      </span>
    </a-radio>
    <!-- *-* -->
    <a-radio class="item" value="range">
      <span class="flex items-center">
        周期从<a-input-number v-model:value="data.rangeStart" class="mx-2" :min="0" :max="data.rangeEnd" />
        到<a-input-number v-model:value="data.rangeEnd" class="mx-2" :min="data.rangeStart" :max="31" />日
      </span>
    </a-radio>
    <!-- *W -->
    <a-radio class="item" value="nearestWeekday">
      <span class="flex items-center">
        当月<a-input-number v-model:value="data.nearestWeekday" class="mx-2" :min="1" :max="31" />日最近的那个工作日
      </span>
    </a-radio>
    <!-- L-* -->
    <a-radio class="item" value="beforeEndMonth">
      <span class="flex items-center">
        月底前<a-input-number v-model:value="data.beforeEndMonth" class="mx-2" :min="1" :max="31" />日
      </span>
    </a-radio>
    <!-- L -->
    <a-radio class="item" value="lastDay">
      当月的最后一日
    </a-radio>
    <!-- *,*,*... -->
    <a-radio class="item" value="specific">
      <div class="flex items-center">
        <span class="flex-shrink-0 mr-4">指定</span>
        <!-- <a-select v-model:value="data.specific" class="w-[200px]" :max-tag-count="1" mode="multiple" allow-clear :options="dayOptions" @click.prevent /> -->
        <a-checkbox-group v-model:value="data.specific" name="checkboxgroup" :options="dayOptions" />
      </div>
    </a-radio>
  </a-radio-group>
</template>

<style scoped lang="less">
.item {
@apply flex line-height-8 mb-2;
}
</style>
